02. Update Existing Page Content

L2 6 - What You'Ll Learn V2

Let's jump right into it. Open up the project in your browser. There's only one HTML file (index.html) so this is what it should look like after you open it:

_The index page of the Udacity website loaded in a browser._

The index page of the Udacity website loaded in a browser.

💡Project Code 💡

Instructions and a walkthrough of the project were in the previous section. You can clone the project from the GitHub link below. Look back at the previous section to see detailed information about the project and a walkthrough video.

Project repository: https://github.com/udacity/course-JS-and-the-DOM

QUESTION:

Write the DOM code necessary to select the first element with class: card

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

Let's store the first .card element in a variable for easy access:

const nanodegreeCard = document.querySelector('.card');

Now that we've stored the first card element in the nanodegreeCard variable, we can use nanodegreeCard to refer to this element instead of having to use document.querySelector('.card') to select the element every time we need access to it.

An Element's Inner HTML

Every element inherits properties and methods from the Element Interface (remember this from the previous lesson!). This means that every element has an .innerHTML property. This property, as it's rightly named, represents the markup of the element's content. We can use this property to:

  • get an element's (and all of its descendants!) HTML content
  • set an element's HTML content

DOM L2 13 - Show InnerHTML

What is .innerHTML?
SOLUTION:
  • a property

What does .innerHTML return?
SOLUTION:
  • a string

💡 Innie vs Outie 💡

The .innerHTML property sets or returns the HTML content inside the selected element (i.e. between the tags).

There's also the rarely used .outerHTML property. .outerHTML represents the HTML element itself, as well as its children.

<h1 id="pick-me">Greetings To <span>All</span>!</h1>

const innerResults = document.querySelector('#pick-me').innerHTML;
console.log(innerResults); // logs the string: "Greetings To <span>All</span>!"

const outerResults = document.querySelector('#pick-me').outerHTML;
console.log(outerResults); // logs the string: "<h1 id="pick-me">Greetings To <span>All</span>!</h1>"

An Element's Text Content

So .innerHTML will get/set an element's HTML content. If we just want the text content, we can use the fantastically named .textContent property!

The .textContent property will:

  • set the text content of an element and all its descendants
  • return the text content of an element and all its descendants

Let's check it out!

DOM L2 18 - Show-TextContent

Check out the .textContent's documentation page on MDN: textContent docs

Setting an element's text content is easy, just set it like you would any other property:

nanodegreeCard.textContent = "I will be the updated text for the nanodegreeCard element!";

DOM L2 20 - Setting Content

<h1 id="test">Ice Cream Flavors</h1>

Given the HTML above, what will be the .textContent value after running this code:

const myElement = document.querySelector('#test');
myElement.textContent = 'The <strong>Greatest</strong> Ice Cream Flavors';
SOLUTION:
  • The < strong >Greatest Ice Cream Flavors

We just saw that passing text that contains HTML characters to .textContent will not display the content as HTML. Instead, it will still display everything as text - even the HTML characters!

If you'd like to update an element, including its HTML, then you need to use the .innerHTML property:

myElement.textContent = 'The <strong>Greatest</strong> Ice Cream Flavors'; // doesn't work as expected

myElement.innerHTML = 'The <strong>Greatest</strong> Ice Cream Flavors';  // works as expected

DOM L2 23 - TextContent Vs InnerHTML

An Element's Text Content - Version 2!

We can't close this section out without looking at the .innerText property!

Like the .textContent property, the .innerText property can be used to get/set an element's text content, but there are some important differences between the two properties.

.textContent sets/gets the text content of an element…pretty clear and simple.

.innerText, on the other hand, is a little tricker. Let's see this in action and then we'll discuss it!

DOM L2 25 - Demo-InnerText

As you saw, .innerText will get the visible text of the element. This is an important distinction! If CSS is used to hide any text inside that element, .innerText will not return that text, while .textContent will return it. And it's not just the hiding/showing nature of CSS that .innerText adheres to, .innerText will also honor changes to things like capitalization.

The .textContent property has been a standard for quite a long time. Conversely, .innerText property is a relatively new addition to the HTML specification. It has been around for a while but was not fully supported by all browser because it was not a part of the HTML specification.

Between .textContent and .innerText, you probably want to use .textContent since that will return all of the text no matter what. Rarely will you actually want only the visible text.

Update Existing Content Recap

In this section, we looked at multiple ways to change page content:

  • .innerHTML
  • .textContent
  • .innerText

We saw that to set HTML content for an element, out of the three properties list above, we can only use .innerHTML. Using .textContent will erroneously include the HTML characters as plain text inside the element.

We also looked at the difference between .textContent and .innerText. .textContent completely ignores any CSS styling and returns all of the element's HTML just as it's listed in the HTML. On the other hand, the .innerText property will take CSS styling into consideration and will return the text that is visibly rendered on the page.

Next Concept